<template>
  <div>
    <el-card class="box-card">
      <search
        :searchProps="searchProps"
        @change="searchChange"
        @search="getList"
        v-if="isSearch"
      ></search>
      <labor
        :disabled="disabled"
        @addChange="addChange"
        @displaySearch="displaySearch"
        @delChange="delChange(2)"
      ></labor>
      <myTable
        :loading="loading"
        :tableList="tableList"
        :page="params.page"
        :page_size="params.page_size"
        :total="total"
        @statusChange="statusChanges"
        @currentChange="paginationChange(1, $event)"
        @sizeChange="paginationChange(2, $event)"
        @edit="addChange(2, $event)"
        @del="delChange(1, $event)"
        @selectionChange="selectionChange"
      ></myTable>
    </el-card>
    <my-form ref="form" @refresh="getList"></my-form>
  </div>
</template>

<script>
import searchProps from "./table/search/searchProps"
import labor from "./table/labor"
import myTable from "./table"
import myForm from "./form"
import {
  list,
  statusChange,
  detail,
  destroy,
} from "@/api/systemProductBrandCategory"
export default {
  components: { myTable, labor, myForm },
  data() {
    return {
      isSearch: false,
      loading: true,
      tableList: [],
      params: {
        brand_name: "",
        page: 1,
        page_size: 10,
        name: "",
        status: "",
        create_time: "",
      },
      total: 0,
      searchProps: searchProps,
      selectIds: [],
      disabled: true,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const { data } = await list(this.params)
        this.loading = false
        this.tableList = data.data
        this.total = data.total
      } catch (ex) {
        this.loading = false
        this.$msg.errorMsg(ex.message)
      }
    },
    // 获取品牌详情
    async getDetail(type, { id }) {
      try {
        const { data } = await detail({ id })
        this.$refs.form.show(type, data)
      } catch (ex) {
        console.log(ex, "error")
      }
    },
    // 更改状态
    async statusChanges(e) {
      try {
        const data = await statusChange({
          id: e.id,
          status: e.status,
        })
        this.$msg.successMsg(data.msg)
      } catch (ex) {
        console.log(ex)
      }
    },
    // 添加/修改弹框
    addChange(type, e) {
      if (type == 1) {
        this.$refs.form.show(type, e)
      }
      if (type == 2) {
        this.getDetail(type, e)
      }
    },
    // 多选
    selectionChange(e) {
      const selectIds = e.map((item) => item.id)
      this.selectIds = selectIds
      if (this.selectIds.length > 0) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    },
    delChange(type, e) {
      if (type == 1) {
        this.selectIds = [e.id]
      }
      this.del()
    },
    // 删除
    del() {
      const that = this
      const ids = this.selectIds.join(",")
      that.$msg.massageConfirm("是否删除当前项？", async function () {
        try {
          const data = await destroy({ ids: ids })
          that.$msg.successMsg(data.msg)
          that.getList()
        } catch (ex) {
          console.log(ex)
        }
      })
    },
    // 分页
    paginationChange(type, e) {
      if (type == 1) {
        this.params.page = e
      } else {
        this.params.page_size = e
      }
      this.getList()
    },
    // 是否显示搜索
    displaySearch() {
      this.isSearch = !this.isSearch
    },
    // 搜素
    searchChange(e) {
      const { brand_name, create_time, name, status } = e
      this.params = {
        ...this.params, // 保留已有属性
        brand_name,
        create_time: [
          create_time ? create_time[0] : "",
          create_time ? create_time[1] : "",
        ],
        name,
        status,
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
